<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一周左右</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            margin: auto;
            width: 400px;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: space-evenly;
            background-color: #cac6c6;
        }

        ul li {
            width: 196px;
            height: 260px;
            border: 1px solid #d1d1d1;
            list-style: none;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

        ul li p {
            display: flex;
            justify-content: left;
        }

        ul li p:nth-of-type(1) {
            width: 120px;
            height: 30px;
            font-size: 26px;
            color: black;
            font-weight: 700;
        }

        ul li p:nth-of-type(2) {
            width: 120px;
            height: 30px;
            font-size: 20px;
            color: #ec6110;
            font-weight: 700;
        }

        ul li img {
            width: 130px;
            height: 160px;
        }
        #app{
            width: 200px;
            height: 100px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{ getData }}</h2>
        <shop-cpn :getdata="getData" @adddata="addData"></shop-cpn>
    </div>

    <script src="./js/vue.js"></script>
    <template id="shopCpn">
        <div class="shop">
            <ul>
                <li v-for="(item,index) in shopList" :key="item.id" @click="getText(index)">
                    <img :src="item.imgSrc" alt="">
                    <p>{{ item.title }}</p>
                    <p>{{ item.price }}</p>
                </li>
            </ul>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    getData: ''
                }
            },
            components: {
                'shop-cpn': {
                    template: '#shopCpn',
                    data() {
                        return {
                            shopList: [{
                                    id: 1,
                                    imgSrc: './img/hs1.jpg',
                                    title: '手机1',
                                    price: '￥5000'
                                },
                                {
                                    id: 2,
                                    imgSrc: './img/hs2.jpg',
                                    title: '手机2',
                                    price: '￥5001'
                                },
                                {
                                    id: 3,
                                    imgSrc: './img/hs3.jpg',
                                    title: '手机3',
                                    price: '￥5002'
                                },
                                {
                                    id: 4,
                                    imgSrc: './img/hs4.jpg',
                                    title: '手机4',
                                    price: '￥5003'
                                },
                                {
                                    id: 5,
                                    imgSrc: './img/hs5.jpg',
                                    title: '手机5',
                                    price: '￥5004'
                                },
                                {
                                    id: 6,
                                    imgSrc: './img/hs6.jpg',
                                    title: '手机6',
                                    price: '￥5005'
                                },
                                {
                                    id: 7,
                                    imgSrc: './img/hs7.jpg',
                                    title: '手机7',
                                    price: '￥5006'
                                },
                                {
                                    id: 8,
                                    imgSrc: './img/hs8.jpg',
                                    title: '手机8',
                                    price: '￥5007'
                                },
                            ]
                        }
                    },
                    props: ['getdata'],
                    methods: {
                        getText(i) {
                            let newTitel = this.getData;
                            newTitel = this.shopList[i].title,
                                this.$emit('adddata', newTitel);
                        }
                    }
                }
            },
            methods: {
                addData(val) {
                    this.getData = val;
                }
            }
        })
    </script>
</body>

</html>